<template>
	<view class="container">
		<view class="cation_btn" @click="goBack">
			<image src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png" mode="">
			</image>
			返回
		</view>
		<view class="container-index">
			<view class="sidebar">
				<view v-for="(item, index) in categories" :key="index"
					:class="['sidebar-item', { active: selectedCategory === index }]"
					@click="selectCategory(index,item.id)">
					{{ item.templateName }}
				</view>
			</view>
			<view class="content">
				<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class="allBox" v-for="(item,index) in categoriesItems" :key="index" @click="goDetails(item)">
						<view class="allImg">
							<image :src="item.thumb" mode="aspectFill"></image>
						</view>
						<p class="allTitle">{{item.name}}</p>
						<view class="allPrice">
							<image src="../../static/what.png" mode="aspectFill"></image>
							<p style="font-size: 30rpx;margin-left:10rpx;">
								￥{{item.price || 0}}
								<!-- 					<span
									style="font-size: 25rpx;color: gainsboro;text-decoration: line-through;margin-left: 20rpx;">90.00</span> -->
							</p>
						</view>
					</view>
					<NoData v-if="!categoriesItems.length"></NoData>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: [],
				selectedCategory: 0,
				// 二级数组
				categoriesItems: [],
				needClear: true
			};
		},
		onShow() {
			this.needClear = true
			this.selectList();
		},
		methods: {
			// 查询全部分类
			selectList() {
				this.$http('/box-classification/all').then(res => {
					this.categories = res.data
					if (this.needClear) {
						// 清空数组，只在需要时清空
						this.categoriesItems.length = 0;
					}
					// 二级分类渲染
					this.categories.forEach(item => {
						item.children.forEach(items => {
							const boxes = items.boxes || [];
							const yfsBoxes = items.yfsBoxes || [];
							// this.categoriesItems.length = 0;
							this.categoriesItems.push(...boxes, ...yfsBoxes);
						});
					});
					// 全部添加到最前面
					this.categories.unshift({
						templateName: '全部'
					})
					 // 处理完毕后将标识重置为 false
					        this.needClear = false;
				})
			},
			// 切换一级分类
			selectCategory(index, id) {
				this.selectedCategory = index;
				if (index == 0) {
					 this.needClear = true;
					this.selectList();
				} else {
					this.$http('/box-classification/child', 'get', {
						boxClass: id
					}).then(res => {
						this.categoriesItems = [...res.data.boxes, ...res.data.yfsBoxes]
					})
				}
			},
			// 判断二级分类怎么去跳转
			goDetails(item) {
				// 个人赏
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/peopleDetails/message?boxId=' + item.id,
					});
				} else if (item.type == 2) {
					// 无限赏
					uni.navigateTo({
						url: '/pages/blind/index/details/copydetails?boxId=' + item.id,
					});
				} else {
					// 一番赏
					uni.redirectTo({
						url: '/pages/playMarket/zhanchui?boxId=' + item.id
					});
				}
			},
			// 返回上个页面
			goBack() {
				uni.switchTab({
					url: '/pages/index/index',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.cation_btn {
		height: 70rpx;
		background-color: rgb(85, 64, 162);
		display: flex;
		align-items: center;
		color: #fff;

		image:nth-child(1) {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.container-index {
		width: 100%;
		height: 100vh;
		display: flex;
		background-color: rgb(85, 64, 162);
	}

	.sidebar {
		// width: 20%;
		text-align: center;
		padding: 10px;
		font-size: 32rpx;
		color: white;
	}

	.sidebar-item {
		padding: 10px;
		cursor: pointer;
		color: #fff;
		position: relative;
	}

	.sidebar-item.active {
		color: white;
		font-weight: bold;
	}

	.sidebar-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4rpx;
		height: 50%;
		background-color: red;
	}

	.content {
		flex: 1;
		padding: 10px;
		width: 75%;
		overflow: auto;
	}

	.allBox {
		width: 48%;
		height: 300rpx;
		border-radius: 20rpx;
		border: 1px solid white;
		margin-bottom: 20rpx;
	}

	.allImg {
		width: 90%;
		height: 150rpx;
		margin: 5%;
		box-sizing: border-box;
		background-color: aqua;
	}

	.allImg image {
		width: 100%;
		height: 150rpx;
	}

	.allTitle {
		width: 90%;
		height: 50rpx;
		margin: 5%;
		box-sizing: border-box;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.allPrice {
		width: 90%;
		height: 50rpx;
		display: flex;
		margin: 5%;
		box-sizing: border-box;
		color: white;
	}

	.allPrice image {
		width: 40rpx;
		height: 40rpx;
	}
</style>